import React, {PureComponent} from "react";

import {DatePicker} from "antd";
import {queryCarChargingChart} from "../common/ApiUtils";
import EchartItemComponent from "./EchartItemComponent";
import moment from "moment";

const {RangePicker} = DatePicker;

class EchartComponent extends PureComponent {

    constructor(props) {
        super(props);

        this.state = {
            titleDataArray: ["电压曲线", "电流曲线", "温度曲线", "角度曲线"],
            chartDataArray: [],
            periodTime: [moment().subtract(4, 'hours'), moment()],
            loading: false
        };

    }

    componentDidMount() {


        const id = this.props.carId;
        console.log('传递过来的id' + id);

        // const endTime = endDate.format("yyyy-MM-dd hh:mm:ss");

        const beginTime = this.state.periodTime[0].format("YYYY-MM-DD hh:mm:ss");
        const endTime = this.state.periodTime[1].format("YYYY-MM-DD hh:mm:ss");

        console.log("endTime => "+endTime +"beginTime => "+beginTime);

        const data = {
            carId: id,
            beginDate: beginTime,
            endDate: endTime
        };

        queryCarChargingChart(data)
            .then((res) => {
                console.log("获取车辆折线图成功");
                console.log(res);

                const responseData = res.data;
                console.log(responseData);
                if (!responseData.retX){
                    console.log("1234");
                    return;
                }

                const newChartDataArray = [];
                let data;
                let yData;
                this.state.titleDataArray.map((item, index) => {
                    switch (index) {
                        case 0:
                            yData = responseData.retPowerVbv;
                            break;
                        case 1:
                            yData = responseData.retPowerAmpere;
                            break;
                        case 2:
                            yData = responseData.retTemperature;
                            break;
                        case 3:
                            yData = responseData.retAngle;
                            break;
                        default:
                            break;
                    }
                    data = {
                        xData: responseData.retX,
                        yData: yData,
                        title: item
                    };
                    newChartDataArray.push(data);
                    return item;
                });

                this.setState((prevState) => (
                    {
                        chartDataArray: newChartDataArray
                    }
                ))


            })
            .catch((err) => {
                console.log("获取车辆折线图失败");
                console.log(err);
            })

    }


    render() {

        function range(start, end) {
            const result = [];
            for (let i = start; i < end; i++) {
                result.push(i);
            }
            return result;
        }

        function disabledRangeTime(_, type) {
            if (type === 'start') {
                return {
                    disabledHours: () => [],
                    disabledMinutes: () => [],
                };
            }

            return {
                disabledHours: () => range(moment().hours(), 24),
                disabledMinutes: () => range(moment().minutes(), 60),
            };
        }


        return (
            <div style={eChartWrapper}>
                <div style={eChartRootWrapper}>
                    <div style={{width: 630, margin: "0 auto", height: "100%", fontSize: 18}}>
                        <div style={{paddingTop: 20, height: 82, position: "relative",cursor:"pointer"}}>当前曲线
                            <div style={{position: "absolute", right: 0, top: 20}} onClick={this.props.changeModalTag}>取消</div>
                        </div>
                        <hr style={{backgroundColor: "black", transform: 'scaleY(0.5)', margin: 0}}/>
                        <div style={{paddingTop: 12, height: 40}}>
                            <RangePicker
                                format="YYYY-MM-DD HH:mm"
                                onOk={this.onOk}
                                defaultValue={this.state.periodTime}
                                disabledDate={current => {

                                    return current && current > moment().endOf("day");
                                }}

                                disabledTime={disabledRangeTime}
                                showTime={{
                                    hideDisabledOptions: true,
                                }}

                            />
                        </div>

                        <div style={chartsWrapper}>

                            {
                                this.state.chartDataArray.map((item, index) => {

                                    return (
                                        <EchartItemComponent chartData={item} key={index}/>
                                    );
                                })
                            }

                        </div>
                    </div>
                </div>
            </div>
        );
    }


    onOk(value) {
        console.log('onOk: ', value);

        if (this.state.loading) {
            return;
        } else {
            this.setState({
                loading: true
            })
        }
        const dataValue = value;

        const id = this.props.carId;


        const beginTime = dataValue[0].format("YYYY-MM-DD hh:mm:ss");
        const endTime = dataValue[1].format("YYYY-MM-DD hh:mm:ss");

        const data = {
            carId: id,
            beginDate: beginTime,
            endDate: endTime
        };

        queryCarChargingChart(data)
            .then((res) => {
                console.log("获取车辆折线图成功");
                console.log(res);

                const responseData = res.data;

                const newChartDataArray = [];
                let data;
                let yData;
                this.state.titleDataArray.map((item, index) => {
                    switch (index) {
                        case 0:
                            yData = responseData.retPowerVbv;
                            break;
                        case 1:
                            yData = responseData.retPowerAmpere;
                            break;
                        case 2:
                            yData = responseData.retTemperature;
                            break;
                        case 3:
                            yData = responseData.retAngle;
                            break;
                        default:
                            break;
                    }
                    data = {
                        xData: responseData.retX,
                        yData: yData,
                        title: item
                    };
                    newChartDataArray.push(data);
                    return item;
                });

                this.setState((prevState) => (
                    {
                        chartDataArray: newChartDataArray,
                        periodTime: dataValue,
                        loading: false
                    }
                ))


            })
            .catch((err) => {
                console.log("获取车辆折线图失败");
                console.log(err);
            })
    }


}

export default EchartComponent;

const eChartWrapper = {
    position: "fixed",
    backgroundColor: "rgba(0,0,0,.4)",
    width: "100%vw",
    height: "100%vh",
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    zIndex: 1000,
};

const eChartRootWrapper = {
    position: "absolute",
    width: 670,
    height: 510,
    backgroundColor: "#fff",
    top: "50%",
    left: "50%",
    transform: "translate(-50%,-50%)",
    borderRadius: 4,
};

const chartsWrapper = {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "space-around",
};



